<template>
  <div class="writeFarming">
    <div class="container">
      <div style="padding: 15px"></div>
      <div class="main">
        <!-- 插图 -->
        <div class="main-left"></div>
        <el-card style="width: 400px;border-radius: 0 0 5px 0;border: unset;box-shadow: unset;background-color: rgba(255, 255, 255, 0.8);">
          <h3>登录</h3>
          <div style="margin: 30px"></div>
          <el-form :model="loginInfo" :rules="loginRule" ref="loginForm">
            <el-form-item prop="username">
              <el-input type="text" ref="userLogin" v-model="loginInfo.username" placeholder="账号">
                <i slot="prefix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                ref="passwordLogin"
                type="password"
                v-model="loginInfo.password"
                placeholder="密码"
              >
              <i slot="prefix" class="el-input__icon el-icon-key"></i>
              </el-input>
            </el-form-item>
          </el-form>
          <el-button type="success" style="margin-top: 15px;width: 70%;" icon="el-icon-user-solid" @click="login">登录</el-button>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginRule: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 12,
            message: '长度在 4 到 12 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 12,
            message: '长度在 4 到 12 个字符',
            trigger: 'blur',
          },
        ],
      },
      loginInfo: {
        username: '1815010138',
        password: '123456',
      },
    }
  },
  methods: {
    //登录事件
    login: function () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: '/api/login',
            method: 'post',
            params: {
              username: this.loginInfo.username,
              password: this.loginInfo.password
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$store.state.authorization = res.data.data.authentication
              this.$store.state.user = res.data.data.user
              if (res.data.data.user.roleName === 'ADMIN') {
                this.$router.push('/admin/index')
              } else {
                this.$router.push('/student/index')
              }
            } else {
              //1.清空表单
              this.$refs.loginForm.resetFields()
              //2.输出错误信息
              this.$message({
                type: 'warning',
                showClose: true,
                message: '登陆失败，请重新尝试！',
                center: true,
              })
            }
          })
        } else {
          this.$message({
            type: 'warning',
            showClose: true,
            message: '请正确填写信息！',
            center: true,
          })
        }
      })
    },
  },
}
</script>

<style>
.writeFarming {
  background-image: url("../assets/bj.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
}

.main {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 700px;
  height: 400px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  box-shadow: 0 0 15px 0.1px #333333;
}
/* 顶部半圆 */
.main::after {
  content: "在线课程平台";
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 10px;
  text-indent: 10px;
  width: 700px;
  height: 80px;
  position: absolute;
  top: -80px;
  border-radius: 300px 300px 0 0;
  background-color: #ffffff;
  background-image: url('../assets/图钉.svg');
  background-repeat: no-repeat;
  background-size: 35px;
  background-position-x: 30%;
  background-position-y: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main .main-left {
  width: 300px;
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url("../assets/学习.svg");
  background-repeat: no-repeat;
  background-size: 300px;
  background-position: center;
  border-radius: 0 0 0 5px;
}
h1 {
  color: white;
  margin-top: 50px;
  font-family: "Droid Sans Mono";
  font-size: 28px;
}
</style>
